<template>
	<view class="mine">
		<view class="my-top">
			<u-row gutter="0">
				<u-col span="4">
					<u-avatar size='200' src="/static/img/a.png"></u-avatar>
				</u-col>
				<u-col span="4">{{userName}}</u-col>
				<u-col span="4" text-align="right">
					<img src="../../static/img/list_more_n.png" style='width: 10px;height: 17px;' />
				</u-col>
			</u-row>
		</view>
		<hr>
		<view class="my-item" @click="order">
			<view class="my-item-left">
				<img src="../../static/img/mine_icon_order.png" style='width: 16px;height: 19px;'/>
			</view>
			我的订单
			<view class="my-item-right">
				<img src="../../static/img/list_more_n.png" style='width: 10px;height: 17px;'/>
			</view>
		</view>
		<view class="my-item" @click="contact">
			<view class="my-item-left">
				<img src="../../static/img/mine_icon_phone.png" style='width: 16px;height: 17px;'/>
			</view>
			联系客服
			<view class="my-item-right">
				<img src="../../static/img/list_more_n.png" style='width: 10px;height: 17px;'/>
			</view>
		</view>
		<view class="my-item" @click='system'>
			<view class="my-item-left">
				<img src="../../static/img/mine_icon_systemsetting.png" style='width: 18px;height: 16px;' />
			</view>
			系统设置
			<view class="my-item-right">
				<img src="../../static/img/list_more_n.png" style='width: 10px;height: 17px;'/>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	
	export default {
		data() {
			return {}
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		methods:{
			order(){
				uni.navigateTo({
				    url: './order'
				});
			},
			system(){
				uni.navigateTo({
				    url: './system'
				});
			}
		}
	}
</script>

<style>
	.mine{
		width: 100%;
	}
	.my-top {
		margin-bottom: 20px;
		padding: 55px 12px 0px 12px;
	}
	
	
	hr {
		height: 6px;
		background-color: #f2f4f7;
		border: none;
		margin-top: 12px;
	}
	.my-item {
		background-color: #fff;
		height: 60px;
		border-bottom: 1px solid #e1e1e3;
		margin: 0 12px 0 12px;
		font-size: 15px;
		color: #35374B;
		line-height: 60px;
	}
	
	.my-item-left img {
		float: left;
		margin-left: 12px;
		margin-top: 21px;
		margin-right: 12px;
	}
	
	.my-item-right {
		float: right;
		font-size: 14px;
		color: #abacb4;
	}
	
	.my-item-right img {
		float: right;
		margin-top: 21px;
		margin-left: 6px;
		margin-right: 10px;
	}
	
	.my-item:hover {
		background-color: #eee;
	}
	
</style>
